<template>
  <!-- 列表 -->
  <div class="listBox">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        class="list-box"
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <div class="item-list" >
        <ul>
          <li v-for="item in list" :key="item.proid">
            <img :src="item.img1">
            <p class="title">{{ item.proname }}</p>
            <p class="price">￥ {{ item.originprice?.toFixed(2) }}</p>
            <p class="one">
              <p class="num">{{ item.discount }} +条评论</p>
              <p class="look">看相似</p>
            </p>
          </li>
        </ul>
       
      </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script setup lang="ts">
import { getGoodsList } from "../../../request/home"
import { ref } from 'vue'
// 处于加载状态
const loading = ref(false)

// 加载完成
const finished = ref(false)
const refreshing = ref(false)

const pagenum = ref<number>(1)

interface GoodsData {
  img1?: string,
  proid?: string,
  proname: string,
  originprice?: number,
  discount?: number,
  [key: string]: any
}

interface Reponse {
  code?: string,
  data?: Array<GoodsData>
}
const list = ref<Array<GoodsData>>([])

const onLoad = () => {
  setTimeout(async () => {
    const res = await getGoodsList(pagenum.value)

    if ((res as Reponse).code !== '200') return
    
    list.value.push(...res.data)
 
    if(res.data.length < 10)  finished.value = true
    pagenum.value++
    loading.value = false
    refreshing.value = false
  }, 1000)
}
// 刷新
const onRefresh = () => {
  pagenum.value = Math.floor(Math.random() * 5) +1
  list.value = []
  finished.value = false
  loading.value = true
  onLoad()
}

</script>
<style scoped lang="scss">
.list-box{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.item-list{
  ul{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    li{
      width: 45%;
      border-radius: 10px;
      background-color: #fff;
      margin-top: 10px;
      img{
        width: 100%;
        height: 160px;
      }
      .title{
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
        font-size: 14px;
        color: #434343;
        word-wrap: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 40px;
      }
      .price{
        color: #ff0000;
        font-size: 18px;
        text-indent: 8px;
        margin: 5px;
      }
      .one{
        display: flex;
        justify-content: space-between;
        .num{
          margin: 5px;
          font-size: 12px;
          color: #999;
          text-indent: 8px;
        }
        .look{
          background-color: #f2f2f2;
          font-size: 12px;
          color: #262626;
          width: 50px;
          height: 20px;
          line-height: 20px;
          border-radius: 20px;
          text-align: center;
          margin: 5px;
          margin-right: 10px;
          margin-bottom: 15px;
        }
      }
    }
  }

}
</style>